<template>
    <div>
        <el-row type="flex" justify="space-between">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
                <el-form-item>
                    <el-date-picker
                        v-model="searchForm.findTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="util.intTimePickerOptions()"
                        @change="getTableData(1)">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select clearable="" @change="getTableData(1)" v-model="searchForm.orgIds" placeholder="请选择业主单位">
                        <el-option label="全部业主单位" value=""></el-option>
                        <el-option
                        v-for="item in orgList"
                        :key="item.organizationId"
                        :label="item.shortName"
                        :value="item.organizationId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input 
                        v-model.trim="searchForm.text" 
                        placeholder="搜索人员名称、电话号码"
                        @keyup.enter.native="getTableData(1)"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                <el-button class="form-search-btn" type="primary" @click="getTableData(1)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-table
            v-loading="loading"
            :data="tableData"
            ref="mainTable"
            style="width: 100%">
            <el-table-column
                label="序号"
                type="index"
                width="50">
            </el-table-column>
            <el-table-column
                prop="org_name"
                label="主叫人所在组织">
            </el-table-column>
            <el-table-column
                prop="call_out_name"
                label="主叫人">
            </el-table-column>
            <el-table-column
                prop="display_number"
                label="主叫电话">
            </el-table-column>
            <el-table-column
                prop="customer_org_name"
                label="被叫人所在组织">
            </el-table-column>
            <el-table-column
                prop="customer_user_name"
                label="被叫人">
            </el-table-column>
            <el-table-column
                prop="customer_phone"
                label="被叫号码">
            </el-table-column>
            <el-table-column
                width="350"
                label="通话时间">
                <template slot-scope="scope">
                    <!-- 需要拼接 -->
                    <span v-if="scope.row.agent_answer_at">{{ scope.row.agent_answer_at + "-" + scope.row.agent_hangup_at }}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column 
                label="录音"
                width="150">
                <template slot-scope="scope">
                    <div v-if="scope.row.record_url != ''" style="display:flex;align-items:center;">
                        <p :class="'weixinAudio_'+scope.row.id" @click="playAudio(scope.row.id, scope.row.record_url)">
                            <audio :src="scope.row.record_url" id="media" width="1" height="1" preload></audio>
                            <span id="audio_area" class="db audio_area">
                                <div class="audio_wrp db">
                                    <span class="audio_play_area">
                                        <i class="icon_audio_default"></i>
                                        <i class="icon_audio_playing"></i>
                                    </span>
                                    <span id="audio_length" class="audio_length tips_global"></span>
                                    <span id="audio_progress" class="progress_bar" style="width: 0%;"></span>
                                </div>
                            </span>
                        </p>
                    </div>
                    <p v-else>暂无录音</p>
                </template>
            </el-table-column>
            <el-table-column 
                label="操作"
                width="60">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.record_url != ''" type="text" @click="handleDownload(scope.row)">下载</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
import '@/libs/weixinAudio'
import util from '@/utils/util'
import { getOrgList } from '@/api/org'
import { getCallRecord } from '@/api/callCenter'
import { downloadAudio } from '@/utils/downloadUtil'

export default {
    name: 'PhoneCallRecord',
    data() {
        return {
            util: util,
            loading: true,
            orgList: [],
            searchForm: {
                findTime: '',
                orgIds: '',
                text: ''
            },
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            // audio集合
            audioList: {},
        }
    },
    created() {
        let that = this
        // 获取业主单位信息
        getOrgList({
            queryType: 0
        }).then(res => {
            if(res.status = 200) {
                that.orgList = res.data
            }
        })
        this.getTableData()
    },
    methods: {
        handleDownload(item){
            downloadAudio(item.record_url,item.id+'.mp3')
        },
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            let parames = {
                startTime: that.searchForm.findTime && that.searchForm.findTime.length > 0 ? (that.searchForm.findTime[0] + ' 00:00:00') : '',
                endTime: that.searchForm.findTime && that.searchForm.findTime.length > 0 ? (that.searchForm.findTime[1] + ' 23:59:59') : '',
                orgIds: that.searchForm.orgIds,

                uuInfo: that.searchForm.text,
                queryType: 1,
                pageSize: that.pageSize,
                pageIndex: that.currentPage - 1
            }
            // 获取列表信息
            getCallRecord(parames).then(res => {
                if(res.status === 200) {
                    that.tableData = []
                    this.$nextTick(()=>{
                        that.tableData = res.data
                    })
                    that.total = res.total
                } else {
                    that.$message.error(res.info)
                }
                that.loading = false
            })
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        // 播放录音
        playAudio (id, audioUrl){
            let that = this
            // 停止其他的音频播放
            for(let key in that.audioList) {
                if(key != ('weixinAudio_'+id)) {
                    that.audioList[key].weixinAudio0.stop()
                }
            }
            if(!that.audioList['weixinAudio_'+id]) {
                if(audioUrl != null && audioUrl != '' && audioUrl != undefined){
                    that.audioList['weixinAudio_'+id] = $('.weixinAudio_'+id).weixinAudio({
                        autoplay: false,
                        src: audioUrl,
                    })
                }else{
                    that.$message({
                        type: 'warning',
                        message: '暂时没有录入语音！'
                    })
                }
            }
        },
    }
}
</script>
